<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery1号店双重切换">
<meta name="Description" content="SuperSlide,jQuery1号店双重切换">
<title>SuperSlide - 1号店双重切换</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>


<style type="text/css">
	/* css 重置 */
	*{margin:0; padding:0; list-style:none; }
	body{ background:#fff; font:normal 12px/22px 宋体;  }
	img{ border:0;  }
	a{ text-decoration:none; color:#333;  }
	a:hover{ color:#1974A1;  }
	.js{width:90%; margin:10px auto 0 auto; }
	.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
	.js p span{ float:right; }
	.js p span a{ color:#f00; text-decoration:underline;   }
	.js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }

	/* 本例子css */
	.sort_brand { width:205px;  border: 1px solid #E4E4E4; height: 378px; overflow: hidden; }
	.sort_brand dt { height: 28px; overflow:hidden; background: #F1EFF0; }
	.sort_brand dt a { width: 102px; height: 28px; line-height: 28px; text-align: center; display: inline-block; border-bottom: 1px solid #e4e4e4; border-left: 1px solid #e4e4e4; position: relative; margin-left: -1px; color: #333;  }
	.sort_brand dt a.on {  border-bottom: 1px solid #FFF; font-weight: bold; background: #FFF; }
	.sort_brand dt a:hover, .sort_brand dt a.on: hover { color: #333; }
	.sort_brand p.scroll_btn a { width: 13px; height: 13px; display: block; float: left; color: #fff; background: #CCC; line-height: 13px; text-align: center; margin-right: 6px; _display: inline; cursor: pointer; }
	.sort_brand p.scroll_btn { float: right; margin-top: 10px; }
	.sort_brand p.scroll_btn a:hover, .sort_brand p.scroll_btn a.on { background: #C00; }
	.aort_list a { width: 203px; height: 78px; display: block; border-top: 1px solid #E4E4E4; }
	.brand_list { margin: 8px 0 0 5px; _margin: 8px 0 0 4px; overflow:hidden; zoom:1; }
	.brand_list a { width: 93px; height: 37px; display: block; float: left; _display: inline; margin-right: 3px; margin-bottom: 3px; }
	.brand_list img { width: 93px; height: 37px; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
	.brand_list a:hover img { filter: alpha(opacity=70); -moz-opacity: .7; -khtml-opacity: .7; opacity: .7; }
	.scroll_wrapper { height: 316px; width: 203px; overflow: hidden; position: relative; }
	.scroll_box { position: absolute; top: 0; left: 0; width: 9999px; }
	.scroll_box .aort_list { float: left; margin-top: -1px; }
</style>


	<dl class="sort_brand" style="margin:0 auto">
		<dt><a href="#">品类中心</a><a href="#" >品牌旗舰</a></dt>
		<dd>
				<div class="scroll_wrapper">
					<div class="scroll_box">
							<div class="aort_list">
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/1.1.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/1.2.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/1.3.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/1.4.jpg"/></a>
							</div>
							<div class="aort_list">
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/2.1.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/2.2.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/2.3.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/2.4.jpg"/></a>
							</div>
							<div class="aort_list">
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/3.1.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/3.2.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/3.3.jpg"/></a>
								<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/3.4.jpg"/></a>
							</div>
					</div>
				</div>
				<p class="scroll_btn">
					<a href="javascript:void(0);">1</a>
					<a href="javascript:void(0);">2</a>
					<a href="javascript:void(0);">3</a>
				</p>
		</dd>
		<dd class="brand_list">
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/1.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/2.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/3.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/4.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/5.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/6.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/7.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/8.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/9.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/10.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/11.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/12.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/13.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/14.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/15.jpg"/></a>
				<a href="http://www.SuperSlide2.com" target="_blank"><img src="images/16.jpg"/></a>
		</dd>
	</dl>

	<script type="text/javascript">
	//书签切换，只切换targetCell
	jQuery(".sort_brand").slide({ titCell:"dt a",targetCell:"dd",delayTime:0 });
	//数字左切换
	jQuery(".sort_brand").slide({ titCell:".scroll_btn a",mainCell:".scroll_box",effect:"left",trigger:"click"});
	</script>


	<div class="js">
		<p><span>效果参考网址：<a target="_blank" href="http://www.yihaodian.com">http://www.yihaodian.com</a></span>js调用：双重SuperSlide</p>
		<textarea>
//书签切换，只切换targetCell
jQuery(".sort_brand").slide({ titCell:"dt a",targetCell:"dd",delayTime:0 });
//数字左切换
jQuery(".sort_brand").slide({ titCell:".scroll_btn a",mainCell:".scroll_box",effect:"left",trigger:"click"});
		</textarea>
	</div>



</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>